<script setup lang="ts">
import { pageUrl } from '@/utils/constants'

type list = {
  title: string
  content: string
}[]

const props = withDefaults(
  defineProps<{
    list: list
    color?: string
    bgColor?: string
    switchTime?: number
  }>(),
  {
    list: () => [],
    color: '#000',
    bgColor: '#fff',
    switchTime: 3,
  },
)

const showContent = (content: string) => {
  if (!content) return
  content = encodeURIComponent(content)
  uni.navigateTo({ url: `${pageUrl['rich-text']}?title=News Announcement&content=${content}` })
}
</script>

<template>
  <view v-if="props.list.length > 0" style="margin-top: 20rpx">
    <view class="notice-box" :style="'background-color: ' + bgColor + ';'">
      <view class="notice-icon">
        <image src="/static/images/notice_bar.png" style="width: 200rpx" />
      </view>
      <scroll-view class="notice-content">
        <swiper
          class="swiper"
          :autoplay="true"
          :interval="switchTime * 1000"
          :duration="1500"
          :circular="true"
          :vertical="true"
        >
          <swiper-item v-for="(item, index) in list" :key="index" class="notice-content-item">
            <view class="swiper-item">
              <view
                class="notice-content-item-text-wrapper"
                :style="'color: ' + color + ';'"
                @tap="showContent(item.content)"
              >
                <text class="notice-content-item-text">{{ item.title }}</text>
                <text class="icon-right"></text>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.swiper {
  height: 60rpx !important;
  padding-bottom: 20rpx;
}
scroll-view {
  flex: 1;
  height: 100%;
  overflow: hidden;
}
.notice-box {
  width: 100%;
  height: 60rpx;
  padding: 0 10rpx;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
}
.notice-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 140rpx;
  margin-left: 10rpx;
}
.notice-content {
  width: calc(100% - 220rpx);
  position: relative;
  font-size: 14px;
}
.notice-content-item {
  width: 100%;
  height: 60rpx;
  text-align: left;
  line-height: 60rpx;
  flex: 1;
}
.notice-content-item-text-wrapper {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-content-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes anotice {
  0% {
    transform: translateY(100%);
  }
  30% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
</style>
